<script setup lang="ts">
// import ImgUpload from '@/components/Image/ImageUpload.vue';
import iconTitle from "@/components/Lie/IconTitle.vue";
import Select from "@/components/Form/Picker.vue";
import mapAddress from "@/components/Form/mapAddress.vue";
import { uploadfiles } from "@/api/upLoad";

import { showLoadingToast, closeToast } from "vant";
import {
  ref,
  reactive,
  defineAsyncComponent,
  toRefs,
  computed,
  watchEffect,
} from "vue";

type dataType = {
  text: string;
  value: string;
};

interface FormObj {
  imgOne: string[];
  imgTwo: string[];
}
const addressvalue = ref("");
const formData = reactive<FormObj>({
  imgOne: ["https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg"],
  imgTwo: ["https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg"],
});
const { imgOne, imgTwo } = toRefs(formData);
console.info(imgOne.value);
const isRequire = ref(true);
const imgData = ref<string[]>([]);

const arrayData = ref<dataType[]>([
  { text: "杭州", value: "Hangzhou" },
  { text: "宁波", value: "Ningbo" },
  { text: "温州", value: "Wenzhou" },
  { text: "绍兴", value: "Shaoxing" },
  { text: "湖州", value: "Huzhou" },
]);
const keyDemos = reactive({
  name: "Wenzhou",
}); //测试将获取到的下拉框值赋值给它
const normalValue = ref("Wenzhou");
const imgDemos = reactive({
  val: [],
}); //测试将获取到的下拉框值赋值给它
const values = ref("");
setTimeout(() => {
  imgData.value = [
    "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg",
    "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg",
  ];
  formData.imgOne = [
    "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg",
    "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg",
  ];
  normalValue.value = "Huzhou";
  console.info(imgOne.value);
}, 3000);

//获取下拉框选中的值
function getSelectValues(val: string, key: string): void {
  keyDemos[key] = val;
  alert(keyDemos.name);
}
//图片有变化时获取最新数组
function getImgData<T>(val: T, key: string, mode: string): void {
  if (mode == "del") {
    formData[key] = val;
  } else {
    let data = {
      file: val,
    };
    showLoadingToast({
      message: "加载中...",
      forbidClick: true,
    });
    uploadfiles(data)
      .then((res) => {
        if (res.code === 200) {
          formData[key].push(import.meta.env.VITE_BASE_IMGURL + res.msg);
        }
        closeToast();
      })
      .catch(() => {
        closeToast();
      });
  }
}

const active = ref(0);
const ImgUpload = defineAsyncComponent(
  () => import("@/components/Image/ImageUpload.vue")
);
const ceshi = ref([1, 2, 3, 4]);
watchEffect(() => {
  console.log(normalValue.value);
});

const formVal = reactive({
  remark: [{ required: true, message: "请输入备注！" }],
});
</script>

<template>
  <div class="padding_15">
    <div class="public_form_box">
      <van-field
        v-model="values"
        label="文本"
        class="public_bottom_line"
        required
        input-align="right"
        placeholder="请输入用户名"
      />
      <van-field
        v-model="values"
        label="地址"
        label-align="top"
        class="public_bottom_line"
        required
        placeholder="请输入用户名"
      />
      <Select
        label="招牌材质1"
        labelAlign="top"
        v-model="normalValue"
        class="public_bottom_line"
        :isRequire="isRequire"
        :columns="arrayData"
      />
      <Select
        v-model="normalValue"
        label="招牌材质2"
        class="public_bottom_line"
        :isRequire="isRequire"
        :columns="arrayData"
      />
      <mapAddress
        v-model="addressvalue"
        :isRequire="true"
        :name="'地址'"
        :placeholder="'请输入地址'"
        :message="formVal.remark[0].message"
        ><van-icon name="location-o" />定位
      </mapAddress>
      <ImgUpload
        class="padding_X_15 padding_top_10 public_bottom_line"
        name="房屋产权证/租赁协议/拍卖协议"
        :max="2"
        :isRequire="isRequire"
        :imgData="imgData"
        @getImgData="getImgData"
        keyName="val"
      />
    </div>
    <iconTitle name="经营许可信息" />
    <div class="public_form_box">
      <ImgUpload
        class="padding_X_15 padding_top_10 public_bottom_line"
        name="房屋产权证/租赁协议/拍卖协议"
        :isRequire="isRequire"
        :imgData="imgTwo"
        @getImgData="getImgData"
        keyName="imgTwo"
      />
    </div>
    <van-tabs v-model:active="active">
      <van-tab v-for="(item, index) in ceshi" :key="index" title="标签 2"
        ><ImgUpload
          class="padding_X_15 padding_top_10 public_bottom_line"
          name="房屋产权证/租赁协议/拍卖协议"
          :max="2"
          :isRequire="isRequire"
          :imgData="imgOne"
          @getImgData="getImgData"
          keyName="imgOne"
      /></van-tab>
    </van-tabs>
  </div>
</template>

<style lang="scss" scoped>
::v-deep .van-cell__title label {
  color: #666666;
  font-size: 16px;
}
::v-deep .van-cell {
  padding: 9px 15px 9px 7px;
}
::v-deep .van-field__label--required:before {
  margin-right: 2px;
  color: var(--van-field-required-mark-color);
  content: "*";
  font-size: 16px;
}
</style>
